<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>魅族官网</title>
    <!-- css分层引入 -->
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/header.css">
    <link rel="stylesheet" href="css/menu.css">
    <link rel="stylesheet" href="css/content.css">
    <link rel="stylesheet" href="css/index-main.css">
    <link rel="stylesheet" href="css/hot-ad.css">
    <link rel="stylesheet" href="css/sell.css">
    <link rel="stylesheet" href="css/footer.css">
    <link rel="stylesheet" href="css/copyright.css">
</head>
<body>
    <!-- header区域开始 -->
    <div class="header">
        <div class="inner-c header-c">
            <!-- 左部分 -->
            <div class="header-left">
                <ul class="nav">
                    <li><a href="#">魅族官网</a></li>
                    <li><a href="#">魅族商城</a></li>
                    <li><a href="#">Flyme</a></li>
                    <li><a href="#">专卖店</a></li>
                    <li><a href="#">服务</a></li>
                    <li><a href="#">社区</a></li>
                </ul>
            </div>
            <!-- 右部分 -->
            <div class="header-right">
                <a href="#" class="collect">我的收藏<span class="tips">new<i></i></span></a>
                <a href="#" class="order">我的订单</a>
                <a href="#" class="login">登录</a>
                <a href="#" class="register">注册</a>
            </div>
        </div>
    </div>
    <!-- header区域结束 -->
    <!-- menu区域开始 -->
    <div class="menu">
        <div class="inner-c menu-c">
            <!-- logo -->
            <h1 class="logo">
                <a href="#">魅族</a>
            </h1>
            <!-- 右部分 -->
            <div class="menu-right">
                <a href="#">PRO手机</a>
                <a href="#">魅蓝手机</a>
                <a href="#">MX手机</a>
                <a href="#">精选配件</a>
                <a href="#">智能硬件</a>
            </div>
        </div>
    </div>
    <!-- menu区域结束 -->
    <!-- 主要内容content区域开始 -->
    <div class="content">
            <!-- main区域开始 -->
            <div class="main">
                <!--1.这边inner-c独立出来，而不是和下面的aside放在一起，是因为
                    放一起，没法界定住aside这个模块，只能作为父级来限制
                    2.不放main旁边，是因为main里的背景色要填充满整个浏览器的宽度
                -->
                <div class="inner-c">
                    <!-- 侧边栏 -->
                    <div class="aside">
                        <ul class="classify">
                            <li>
                                <p>
                                    <a href="#">全部商品分类</a>
                                </p>
                            </li>
                            <li>
                                <p>
                                    <a href="#">手机</a>
                                </p>
                            </li>
                            <li>
                                <p>
                                    <a href="#">智能硬件</a>
                                </p>
                            </li>
                            <li>
                                <p>
                                    <a href="#">耳机</a>
                                    <span>/</span>
                                    <a href="#">音箱</a>
                                </p>
                            </li>
                            <li>
                                <p>
                                    <a href="#">路由器</a>
                                    <span>/</span>
                                    <a href="#">移动电源</a>
                                </p>
                            </li>
                            <li>
                                <p>
                                    <a href="#">保护套</a>
                                    <span>/</span>
                                    <a href="#">后盖</a>
                                    <span>/</span>
                                    <a href="#">贴膜</a>
                                </p>
                            </li>
                            <li>
                                <p>
                                    <a href="#">数据线</a>
                                    <span>/</span>
                                    <a href="#">电源适配器</a>
                                </p>
                            </li>
                            <li>
                                <p>
                                    <a href="#">周边配件</a>
                                </p>
                            </li>
                        </ul>
                    </div>
                    <!-- 焦点图 -->
                    <div class="banner">
                        <!-- 图片列表 -->
                        <ul>
                            <li><a href="#"><img src="images/banner.jpg" alt=""></a></li>
                        </ul>
                        <!-- 左右按钮 -->
                        <div class="btn">
                            <span class="left-btn"></span>
                            <span class="right-btn"></span>
                        </div>
                        <!-- 图标底部下标 -->
                        <ol>
                            <li class="current"></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                        </ol>
                    </div>
                </div>
            </div>
            <!-- main区域结束 -->
            <!-- 热门广告区 -->
            <div class="hot-ad">
                <div class="inner-c">
                    <ul>
                        <!-- 功能按钮 -->
                        <li class="first">
                            <a href="#" class="common">
                                <img src="images/1450855246-61162.png" alt="">
                                <p>M码通道</p>
                            </a>
                            <a href="#"class="common">
                                <img src="images/1450855279-64872.png" alt="">
                                <p>以旧换新</p>
                            </a>
                            <a href="#" class="common a3">
                                <img src="images/1450855198-58056.png" alt="">
                                <p>魅族意外保</p>
                            </a>
                            <a href="#" class="common a4">
                                <img src="images/1451960447-93534.png" alt="">
                                <p>回购单查询</p>
                            </a>
                        </li>
                        <!-- 4张广告图 -->
                        <li></li>
                        <li></li>
                        <li></li>
                        <li class="last"></li>
                    </ul>
                    <!-- 功能按钮 -->
                    <!-- <div class="ad-button">

                    </div> -->
                    <!-- 3张广告图 -->
                </div>
            </div>
            <!-- 热门广告区结束 -->
            <!-- 售卖区 -->
            <div class="sell">
                <div class="inner-c">
                    <p class="title"><span>手机</span><a href="#">更多</a></p>
                    <div class="detail">
                        <ul>
                            <li>
                                <span class="tags hot">热卖</span>
                                <p>
                                    <img src="images/CnQOjVf6EfOAKlj2AAvhVMfnh40856_180x180.png" alt="">
                                </p>
                                <p>魅蓝note3</p>
                                <p class="date">11日-12日 限量开售</p>
                                <p class="price">￥ 799</p>
                            </li>
                            <li>
                                <p>
                                    <img src="images/CnQOjVf8Qm2AGJwmAAf5c4NUNpI085_180x180.png" alt="">
                                </p>
                                <p>魅蓝3</p>
                                <p class="date">11日-12日 限量开售</p>
                                <p class="price">￥ 599</p>
                            </li>
                            <li>
                                <span class="tags hot">热卖</span>
                                <p>
                                    <img src="images/Cix_s1f6EZaAMxvjAA2l_exLROk326_180x180.png" alt="">
                                </p>
                                <p>魅蓝3s</p>
                                <p class="date">11日-12日 限量开售</p>
                                <p class="price">￥ 699</p>
                            </li>
                            <li>
                                <span class="tags discount">特惠</span>
                                <p>
                                    <img src="images/CnQOjVf4y6iAe-3RAAbqolcyaco939_180x180.png" alt="">
                                </p>
                                <p>魅蓝 metal</p>
                                <p class="date">11日-12日 限量开售</p>
                                <p class="price">￥ 999</p>
                            </li>
                            <li class="last">
                                <span class="tags hot">热卖</span>
                                <p>
                                    <img src="images/CnQOjVffSHOAaRkmAA0Rkx2XjKE222_180x180.png" alt="">
                                </p>
                                <p>魅蓝 E</p>
                                <p class="date">11日-12日 限量开售</p>
                                <p class="price">￥ 1299</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
    </div>
    <!-- 主要内容content区域开始 -->

    <!-- footer区域开始 -->
    <div class="footer">
        <div class="inner-c footer-c">
            <!-- 左半服务部分 -->
            <div class="service">
                <dl>
                    <dt>帮助说明</dt>
                    <dd>
                        <a href="#">支付方式</a>
                        <a href="#">配送说明</a>
                        <a href="#">售后服务</a>
                        <a href="#">付款帮助</a>
                    </dd>
                </dl>
                <dl>
                    <dt>Flyme</dt>
                    <dd>
                        <a href="#">开放平台</a>
                        <a href="#">固件下载</a>
                        <a href="#">软件商店</a>
                        <a href="#">查找手机</a>
                    </dd>
                </dl>
                <dl>
                    <dt>关于我们</dt>
                    <dd>
                        <a href="#">关于魅族</a>
                        <a href="#">加入我们</a>
                        <a href="#">联系我们</a>
                        <a href="#">法律声明</a>
                    </dd>
                </dl>
                <dl class="last-dl">
                    <dt>关注我们</dt>
                    <dd>
                        <a href="#">新浪微博</a>
                        <a href="#">腾讯微博</a>
                        <a href="#">QQ空间</a>
                        <a href="#">官方微信</a>
                    </dd>
                </dl>
            </div>
            <!-- 右半联系方式 -->
            <div class="contact">
                <p class="text">24小时全国服务热线</p>
                <p class="phone">400-788-3333</p>
                <a href="#"><i></i><span>24小时在线客服</span></a>
            </div>
        </div>
    </div>
    <!-- footer区域结束 -->

    <!-- copyright区域开始 -->
    <div class="copyright">
        <div class="inner-c copyright-c">
            <span>©2016 Meizu Telecom Equipment Co., Ltd. All rights reserved.</span>
            <span>备案号：粤ICP备13003602号-2</span>
            <span>经营许可证编号：粤B2-20130198</span>
            <span class="license">营业执照<i class="icon-1"></i><i class="icon-2"></i></span>
        </div>
    </div>
    <!-- copyright区域结束 -->
</body>
</html>